<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏+弹出功能实现</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			div{
				width: 500px;
				height: 500px;
				background: #ff0;
				display: none;
			}
			/* JQuery操作动画
			   show()              功能：显示效果   本质：display:block
			   hide()              功能：隐藏效果   本质：display:none
			   
			   slideDown()         功能：向下(滑动式)效果
			   slideUp()           功能：向上(滑动式)效果
			   
			   fadeIn(毫秒数)       功能：淡入   本质：显示+透明度：0~1
			   fadeOut(毫秒数)      功能：淡出   本质：隐藏+透明度：1~0
			 
			 */
		</style>
	</head>
	<body>
		<button id="show">显示按钮</button>
		<button id="hide">隐藏按钮</button>
		<button id="slidedown">向下按钮</button>
		<button id="slideup">向上按钮</button>
		<button id="fi">淡入</button>
		<button id="fo">淡出</button>
		<div></div>
		<script>
			$("#fi").click(function(){
				$("div").fadeIn(600);
			});
			$("#fo").click(function(){
				$("div").fadeOut(600);
			});
			$("#slidedown").click(function(){
				$("div").slideDown();
			});
			$("#slideup").click(function(){
				$("div").slideUp();
			});
			$("#hide").click(function(){
				$("div").hide();
			});
			$("#show").click(function(){
				$("div").show();
			});
		</script>
	</body>
</html>